<template>
	<view class="exchange posr" :style="{paddingBottom:isMobile?'80px':''}">
		<m-goods v-if="!detail.show" :pageData="pageData" @goPage="goPage" @showDetail="showDetail" :list="list"></m-goods>
		<view class="goods-detail" v-if="detail.show">
			<view class="goods-detail-brand flex-start-nowrap fz14 fwb" style="margin-left: 25px;" v-if="!isMobile" >
				<text class="c55 cup" @click="goBack">兑换</text> > {{detail.row.product_name}}
			</view>
			<view :class="['goods-detail-content',isMobile?'flex-center flexdc':'flex-start-nowrap']">
				<view class="goods-detail-content-left">
					<view class="" style="min-height: 92px;">
						<u-image
						width="100%"
						:src="detail.row.product_picture_path" 
						heigth="96"
						mode="heightFix">
						</u-image>
					</view>
					<view class="fz16 fwb flex-center alic tac" style="font-weight: bold;">{{detail.row.product_name}}</view>
					<view class="fz14 fwb flex-center alic tac goods-detail-content-left-total" >
						<text>剩余：{{detail.row.product_number < 0?'无限':detail.row.product_number}}</text>
						<text class="c0f plr10 cup" @click="goArticle({url:detail.row.product_detail_path})">查看详情</text></view>
				</view>
				<view class="setting-form-line1" v-if="isMobile">
					<u-line></u-line>
				</view>
				<view class="goods-detail-content-right" >
					<u-form labelWidth="200" :labelPosition="isMobile?'left':'left'" :labelAlign="isMobile?'left':'right'" :borderBottom="isMobile">
						<u-form-item label="兑换所需芝草数" :class="['noBorder rightText']" v-if="detail.row.product_type == 2">
							<view class="flex-start-nowrap alic">
								<text class="fz16">{{detail.row.product_price * (formData.number || 1)}}</text>
								<text class="cff3" v-if="loginInfo.balance < detail.row.product_price * (formData.number || 1)">芝草不足，前往项目大厅</text>
							</view>
						</u-form-item>
						<u-form-item label="请输入需要兑换的芝草数量" :class="[isMobile?'noBorder rightText':'']" v-else>
							<view class="flex-start-nowrap alic">
									<u-input placeholder="请输入芝草数量"
									type="number"
									@input="inputChange"
									v-model="formData.balance"
									maxlength="7"
									></u-input>
							</view>
						</u-form-item>
						<u-line v-if="isMobile"></u-line>
						<template v-if="detail.row.product_type == 2" >
							<u-form-item label="兑换数量">
								<u-input
								v-model="formData.number"
								type="number"
								maxlength="5"
								placeholder="请输入兑换数量"
								></u-input>
							</u-form-item>
						</template>
						<template v-if="detail.row.product_type == 1">
							<u-form-item label="可兑换金额" :class="['noBorder',isMobile?'rightText':'']">
								<view class="flex-start-nowrap alic">
									<text class="fz16">{{formData.total_amount || 0}}</text> 
								</view>
							</u-form-item>
							<u-line v-if="isMobile"></u-line>
							<u-form-item label="本次纳税金额" :class="['noBorder rightText']">
								<view class="flex-start-nowrap alic">
									<text class="fz16">{{formData.tax_amount || 0}}</text> 
									<view class="c26 cup" @click="goArticle({id:'ZXZ_TAX_EXPLANATION',title:'纳税说明'})">
										纳税与退税说明
									</view>
									<u-icon @click="goArticle({id:'ZXZ_TAX_EXPLANATION',title:'纳税说明'})" class="cup" name="info-circle" size="18" color="#26bbff"></u-icon>
								</view>
							</u-form-item>
							<u-line v-if="isMobile"></u-line>
							<u-form-item label="实际到账金额" :class="['noBorder rightText']">
								<view class="flex-start-nowrap alic">
									<text class="fz16">{{formData.received_amount || 0}}</text> 
								</view>
							</u-form-item>
						</template>
						<view class="setting-form-line1" v-if="isMobile">
							<u-line></u-line>
						</view>
						<u-form-item label="备注"  :class="['labelTop',isMobile?'labelPositionTop':'']" >
							<u-textarea
							placeholder="请输入备注"
							v-model="formData.remark"
							border="surround"
							></u-textarea>
						</u-form-item>
					</u-form>
					
				</view>
			</view>
			<u-line v-if="!isMobile" ></u-line>
			<view :class="[!isMobile ?' tac':'', 'goods-detail-btn']">
				<view class="fz14 c999 " v-if="detail.row.product_type == 2">
					兑换前请确认信息填写正确
				</view>
				<view class="fz14 c999 " v-else>
					100芝草=1元，每次兑换实际到账金额不能低于1元，低于1元无法兑换，48小时内到账，节假日延时对应时间
				</view>
				<view class="goods-detail-btn-box">
					<m-button @clickBtn="buy" :loading="disabled" :disabled="detail.row.product_type == 2 &&  loginInfo.balance < detail.row.product_price * (formData.number || 1)"
					 :styleObj="{width:isMobile?'100%':'146px',height:'36px',borderRadius:'2px'}">立即兑换</m-button>
				</view>
			</view>
		</view>
		<m-popup :show="popup.show" :okTxt="okTxt" :footer="true" @close="closeDetail" @sure="sureDetail">
			<view class="popup-detail">
				{{popup.text}}
			</view>
		</m-popup>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				pageData:{
					page:1,
					page_size:12
				},
				list:[],
				detail:{
					show:false,
					row:{},
					
				},
				formData:{
					
				},
				popup:{
					show:false,
					text:'',
					taxRatio:0
				},
				disabled:false,
				okTxt:'确定',
			};
		},
		mounted() {
			
			this.productList()
		},
		methods:{
			buy(){
				if(this.detail.row.product_type == 2 &&  this.loginInfo.balance < this.detail.row.product_price * (this.formData.number || 1) ){
					return
				}
				let row = this.detail.row;
				let cmd = 'orderCash' , par = {
					"product_id": this.detail.row.product_id,
				}
				
				if(row.product_type == 1){//现金
					par = {
						...par,
					    "total_amount": 0,
					    "tax_amount": 0,
					    "received_amount": 0,
						...this.formData,

					}
					// formData.received_amount
					if((par.received_amount || 0) < 1){
						uni.showToast({
							title:'至少兑换1元，请重新输入金额',
							icon:'none'
						})
						return 
					}
				}else{
					cmd = 'orderProduct'
					par = {
						...par,
					    "number": 1,
						"balance": this.detail.row.product_price * this.formData.number,
						...this.formData,
					}
				}
				if(row.product_type == 1){
					par.balance = par.balance * 1
					par.total_amount = par.total_amount * 1
					par.received_amount = par.received_amount *1
				}else{
					par.number = par.number * 1
				}
				this.disabled = true;
				setTimeout(()=>{
					this.disabled = false
				},10000)
				this.$api[cmd](par).then(res => {
					if(res.code == 200){
						uni.showToast({
							title:'兑换成功！',
							icon:'none'
						})
						this.setUnredMsg()
						this.detail.show = false
						this.$emit('init')
						this.productList()
						setTimeout(()=>{
							this.$emit('setScroll')
							this.disabled = false
						},1000)
						
					}else{
						this.disabled = false;
						this.popup.text = res.message || '系统异常'
						this.clickTax()
						// uni.showToast({
						// 	title: res.message,
						// 	icon:'none'
						// })
					}
				})
			},
			inputChange(e){
				if(e>=100){
					this.formData.total_amount =(e / 100).toFixed(2)
					this.taxRatioAmount()
				}else{
					this.formData.total_amount =0
					this.formData.tax_amount =0
					this.formData.received_amount =0
				}
			},
			inputChangeGoods(e){
				this.detail.row.product_price = e
			},
			sureDetail(){
				this.utils.goPath('/pages/setting/setting')
			},
			taxRatioInfo(){
				this.$api.taxRatioInfo().then(res => {
					if(res.code == 200){
						
						this.popup.text = res.data.des;
						this.popup.taxRatio = res.data.taxRatio;
					}
				})
			},
			taxRatioAmount(){
				let par = {
					total_amount:this.formData.balance * 1 / this.detail.row.product_price
				}
				this.$api.taxRatioAmount(par).then(res => {
					if(res.code == 200){
						this.formData.tax_amount = res.data.taxAmount
						this.formData.received_amount = (this.formData.total_amount - this.formData.tax_amount).toFixed(2)
						this.$forceUpdate()
					}
				})
			},
			clickTax(){
				if(this.popup.text.indexOf('手机号') > -1){
					this.okTxt = '前往'
				}
				this.popup.show = true;
			},
			goPage(val){
				this.pageData.page = val;
				this.productList()
				setTimeout(()=> {
					this.$emit('setScrollTop')
				},0)
			},
			productList(){
				this.$api.productList(this.pageData).then(res => {
					if(res.code == 200){
						this.list = res.data.list || []
						this.pageData.total = res.data.count
					}
				})
			},
			showDetail(item){
				this.detail.show = !this.detail.show
				if(!this.detail.show){
					setTimeout(()=> {
						this.$emit('setScroll')
					},0)
				}else{
					this.$emit('setScroll' , this.detail.show)
				}
				if(item){
					this.formData = {}
					this.detail.row = item;
					if(item.product_type == 1){
						this.taxRatioInfo()
					}
				}
			},
			goBack(){
				this.showDetail()
			},
			closeDetail(){
				this.popup.show = false;
			},
			balanceStatistics(){
				
			},
		}
	}
</script>

<style lang="scss">
	.exchange{
	}
	.goods-detail{
		background: #fff;
		padding: 30rpx 23rpx;
		&-content{
			margin-top: 65px;
			margin-bottom: 45px;
			&-left{
				width: 204px;
				&-total{
					padding: 5px 0;
				}
				
			}
			&-right{
				margin-left: 90px;
				/deep/.u-form-item__body__right{
					width: 240px;
					border: 1px solid #E7EAEF;
					border-radius: 2rpx;
					flex: none;
					margin-left: 20px;
				}
				.fz16{
					font-size: 16px;
					margin-right: 5px;
					color: #666666;
				}
				
			}
			.labelTop{
				/deep/.u-form-item__body__left{
					align-items: flex-start;
				}
				/deep/.u-form-item__body__right{
					width: 407px;
					
				}
			}
			.rightText{
				/deep/.u-form-item__body__right{
					width: 407px;
				}
			}
			.noBorder{
				/deep/.u-form-item__body__right{
					border:none;
				}
				
			}
		}
		&-btn{
			margin-top: 40px;
			&-box{
				margin-top: 23px;
				margin-bottom: 25px;
			}
		}
	}
	@media screen and (min-width: 0px) and (max-width:750px){
		.goods-detail{
			&-content{
				&-right{
					width: 100%;
					margin-left: 0px;
					/deep/.u-form-item__body__right{
						width: calc(100% - 150px);
						flex: none;
						margin-left: 0px;
					}
					.fz16{
					
					}
					
				}
				.labelTop{
					/deep/.u-form-item__body__left{
						align-items: flex-start;
					}
					/deep/.u-form-item__body__right{
						width:  calc(100% - 250px);
					}
				}
				.labelPositionTop{
					/deep/.u-form-item__body{
						flex-direction: column !important;
						.u-form-item__body__right{
							width: 100%;
							border: none;
						}
						
					}
				}
				/deep/ .u-form-item{
					padding: 10px 0;
				}
				.rightText{
					/deep/.u-form-item__body__right{
						width:  calc(100% - 200px);
						.u-form-item__body__right__content{
							display: flex;
							justify-content: flex-end;
						}
						.u-form-item__body__right__content__slot{
							flex: none;
						}
						.uni-input-placeholder,.uni-input-input{
							text-align: right;
						}
					}
				}
			}
			&-btn{
				// margin-left: -30px;
				// width: calc(100% + 20px);
				position: absolute;
				left: 0;
				right: 0;
				background: #f7faff;
				padding-top: 10px;
				margin-top: 0;
				padding-left: 20px;
				padding-right: 20px;
				padding-bottom: 20px;
				
			}
		}
	}
	
	.setting-form-line{
		
		.u-line{
			display: none;
		}
	}
	.setting-form-line1{
		
		.u-line{
			height: 12rpx;
			left: 0;
			right: 0;
			position: absolute;
			width: calc(100%);
			padding: 0;
			background: #f7faff;
			border: none !important;
			border-color: transparent;
		}
	}
</style>
